<template>
  <el-row class="lineBar">
    <div class="line" ref="line"></div>
  </el-row>
</template>

<script>
  import echarts from "echarts"
  const areaColorList = [
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#095AE6" }, { offset: 1, color: "rgba(255, 255, 255, 1)" }]),
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#3FFFEA" }, { offset: 1, color: "rgba(255, 255, 255, 1)" }]),
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#FFEA00" }, { offset: 1, color: "rgba(255, 255, 255, 1)" }]),
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#DD53F9" }, { offset: 1, color: "rgba(255, 255, 255, 1)" }]),
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#52FC4A" }, { offset: 1, color: "rgba(255, 255, 255, 1)" }])
  ]
  const colorList = [
    "#095AE6",
    "#3FFFEA",
    "#FFEA00",
    "#DD53F9",
    "#52FC4A"
  ]
  export default {
    name: "lineBar",
    props: {
      lineParams: {type: [Object, Array], default: () => {}}
    },
    watch: {
      lineParams() {
        this.draw()
      }
    },
    mounted() {
        let myChart = echarts.init(this.$refs.line)
        window.onresize = myChart.resize()
        myChart.setOption(this.initLine())
    },
    methods: {
      draw() {
        let myChart = echarts.init(this.$refs.line)
        window.onresize = myChart.resize()
        myChart.setOption(this.initLine())
      },
      initLine() {
        // this.lineParams.params = [
        //   {
        //     "inspectDay": "2020-04-01",
        //     "diagModelCode": "blob_detect",
        //     "diagModelName": "光伏热斑识别模型",
        //     "defectiveCnt": "1"
        //   },
        //   {
        //     "inspectDay": "2020-04-02",
        //     "diagModelCode": "blob_detect",
        //     "diagModelName": "光伏热斑识别模型",
        //     "defectiveCnt": "2"
        //   },
        //   {
        //     "inspectDay": "2020-04-03",
        //     "diagModelCode": "blob_detect",
        //     "diagModelName": "光伏热斑识别模型",
        //     "defectiveCnt": "3"
        //   },
        //   {
        //     "inspectDay": "2020-04-01",
        //     "diagModelCode": "drop_detect",
        //     "diagModelName": "光伏组件脱落识别模型",
        //     "defectiveCnt": "4"
        //   },
        //   {
        //     "inspectDay": "2020-04-03",
        //     "diagModelCode": "drop_detect",
        //     "diagModelName": "光伏组件脱落识别模型",
        //     "defectiveCnt": "5"
        //   },
        //   {
        //     "inspectDay": "2020-04-04",
        //     "diagModelCode": "drop_detect",
        //     "diagModelName": "光伏组件脱落识别模型",
        //     "defectiveCnt": "6"
        //   }
        // ]
        // 根据模型分离数组
        const series = this.getModelList(this.lineParams.params)
        const modelCodeList = []
        series.map(item => {
          modelCodeList.push(item.name)
        })
        let option = {
          title: {
            text: ''
          },
          tooltip: {
            // trigger: 'axis',
            // axisPointer: {
            //   type: 'cross',
            //   label: {
            //     backgroundColor: '#6a7985'
            //   }
            // }
          },
          legend: {
            bottom: "0",
            textStyle: {
              color: "#808080",
              fontSize: "10"
            },
            // data: ['故障总量', '热斑', '光伏板脱落', '光伏板踩踏', '围栏倾倒']
            data: modelCodeList
          },
          toolbox: {
            show: false,
            feature: {
              saveAsImage: {}
            }
          },
          grid: {
            top: "10",
            left: '10',
            right: '60',
            bottom: '30',
            containLabel: true
          },
          xAxis: [
            {
              splitLine: {
                lineStyle: {
                  color: "#F7F7F7"
                }
              },
              axisLine: {
                lineStyle: {
                  color: "#F5F5F5"
                }
              },
              axisLabel: {
                color: "rgba(128,128,128,0.6)",
                rotate: -30,
                fontSize: "8"
              },
              type: 'category',
              boundaryGap: false
              // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            }
          ],
          yAxis: [
            {
              splitLine: {
                lineStyle: {
                  color: "#F7F7F7"
                }
              },
              axisLine: {
                lineStyle: {
                  color: "#F5F5F5"
                }
              },
              axisLabel: {
                color: "rgba(128,128,128,0.6)",
                fontSize: "8"
              },
              type: 'value'
            }
          ],
          series: series
          // series: [
          //   {
          //     name: '故障总量',
          //     type: 'line',
          //     symbol: "none",
          //     color: "#095AE6",
          //     areaStyle: {
          //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#095AE6" }, { offset: 1, color: "rgba(255, 255, 255, 1)" }])
          //     },
          //     smooth: true,
          //     data: [820, 932, 901, 934, 1290, 1330, 1320, 1400 * Math.random(), 1400 * Math.random(), 1400 * Math.random(), 1400 * Math.random(), 1400 * Math.random()]
          //   },
          //   {
          //     name: '热斑',
          //     type: 'line',
          //     symbol: "none",
          //     smooth: true,
          //     color: "#3FFFEA",
          //     areaStyle: {
          //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#3FFFEA" }, { offset: 1, color: "rgba(255, 255, 255, 1)" }])
          //     },
          //     data: [220, 182, 191, 234, 290, 330, 310, 300 * Math.random(), 300 * Math.random(), 300 * Math.random(), 300 * Math.random(), 300 * Math.random()]
          //   },
          //   {
          //     name: '光伏板脱落',
          //     type: 'line',
          //     symbol: "none",
          //     smooth: true,
          //     color: "#FFEA00",
          //     areaStyle: {
          //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#FFEA00" }, { offset: 1, color: "rgba(255, 255, 255, 1)" }])
          //     },
          //     data: [150, 232, 201, 154, 190, 330, 410, 300 * Math.random(), 300 * Math.random(), 300 * Math.random(), 300 * Math.random(), 300 * Math.random()]
          //   },
          //   {
          //     name: '光伏板踩踏',
          //     type: 'line',
          //     symbol: "none",
          //     smooth: true,
          //     color: "#DD53F9",
          //     areaStyle: {
          //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#DD53F9" }, { offset: 1, color: "rgba(255, 255, 255, 1)" }])
          //     },
          //     data: [320, 332, 301, 334, 390, 330, 320, 300 * Math.random(), 300 * Math.random(), 300 * Math.random(), 300 * Math.random(), 300 * Math.random()]
          //   },
          //   {
          //     name: '围栏倾倒',
          //     type: 'line',
          //     symbol: "none",
          //     smooth: true,
          //     label: {
          //       normal: {
          //         show: true,
          //         position: 'top'
          //       }
          //     },
          //     color: "#52FC4A",
          //     areaStyle: {
          //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#52FC4A" }, { offset: 1, color: "rgba(255, 255, 255, 1)" }])
          //     },
          //     data: [120, 132, 101, 134, 90, 230, 210, 150, 300 * Math.random(), 300 * Math.random(), 300 * Math.random(), 300 * Math.random()]
          //   }
          // ]
        }
        return option
      },
      getModelList(list = []) {
        const targList = []
        list.map(item => {
          const index = targList.findIndex(subItem => subItem.name === item.diagModelName)
          if (index !== -1) {
            targList[index].data.push([item.inspectDay, Number(item.defectiveCnt)])
          } else {
            targList.push({
              name: item.diagModelName,
              type: 'line',
              symbol: "none",
              color: colorList[targList.length],
              areaStyle: {
                color: areaColorList[targList.length]
              },
              smooth: true,
              data: [[item.inspectDay, Number(item.defectiveCnt)]]
            })
          }
        })
        return targList
      }
    }
  }
</script>

<style lang="scss">
  .lineBar{
    width: 100%;
    display:flex;
    flex-wrap: nowrap;
    .line {
      flex: 4.8;
      margin-right: 0;
      height: calc((100vh - 372px) / 2)!important;
    }
    .bar {
      flex:4.8;
    }
  }
</style>
